<template>
  <div class="upload-page">
    <!-- 预览 -->
    <div class="demo-upload" v-for="item in previewList" :key="item.uid">
      <template v-if="item.type === 'image'">
        <div class="demo-upload-list">
          <img :src="item.url" />
          <div class="demo-upload-list-cover">
            <Icon
              type="ios-eye-outline"
              @click.native="handleView(item)"
            ></Icon>
            <Icon
              type="ios-trash-outline"
              @click.native="handleRemove(item)"
            ></Icon>
          </div>
        </div>
      </template>
      <template v-else>
        <li class="ivu-upload-list-file upload-document">
          <span
            ><i class="ivu-icon ivu-icon-md-document"></i>{{ item.name }}</span
          >
          <i
            class="ivu-icon ivu-icon-ios-close ivu-upload-list-remove"
            @click="handleRemove(item)"
          ></i>
        </li>
      </template>
    </div>
    <Upload
      ref="upload"
      :show-upload-list="false"
      :format="formatList"
      :max-size="maxSize"
      :on-format-error="handleFormatError"
      :on-exceeded-size="handleMaxSize"
      :before-upload="handleBeforeUpload"
      :multiple="multiple"
      type="drag"
      :action="uploadUrl"
      style="display: inline-block; width: 58px"
      @input.native="changeFile"
    >
      <Button type="primary" :disabled="uploadDisabled">上传</Button>
    </Upload>
    <Modal
      title="预览"
      v-model="visible"
      class="preview-img-modal"
      :footer-hide="true"
    >
      <img :src="previewSrc" v-if="visible" class="preview-img" />
    </Modal>
    <div class="mark" v-if="uploadDisabled"></div>
  </div>
</template>
<script>
export default {
  props: {
    uploadDisabled: {
      default: false,
    },
    fileList: {
      default: () => {
        return [];
      },
    },
    previewList: {
      default: () => {
        return [];
      },
    },
    fileIds: {
      default: () => {
        return [];
      },
    },
    //上传文件支持的格式
    formatList: {
      default: () => {
        return [];
      },
    },
    maxSize: {
      default: () => {
        return 30720; //30M
      },
    },
    uploadUrl: {
      default: () => {
        return "";
      },
    },
    multiple: {
      default: true,
    },
    pass: {
      default: () => {
        return {
          isError: false,
        };
      },
    },
  },
  data() {
    return {
      visible: false,
      previewSrc: "",
    };
  },
  methods: {
    //预览
    handleView(file) {
      this.previewSrc = file.url;
      this.visible = true;
    },
    handleRemove(file) {
      this.removeArrayItem(this.previewList, "id", file.id);
      this.removeArrayItem(this.fileList, "uid", file.id);
      this.removeArrayItem(this.fileIds, null, file.id);
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "格式错误",
        desc: file.name + " 格式错误",
      });
      this.pass.isError = true;
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "文件大小超出限制",
        desc: file.name + " 文件大小超出限制",
      });
      this.pass.isError = true;
    },
    handleBeforeUpload(file) {
      //handleBeforeUpload先于handleFormatError，等this.pass的修改结果
      setTimeout(() => {
        if (this.pass && this.pass.isError) {
          return;
        }
        this.$emit("handleBeforeUpload", file);
      }, 500);
    },
    removeArrayItem(array, key, id) {
      let findIndex = array.findIndex((d) => {
        return !!key ? d[key] === id : d === id;
      });
      if (findIndex !== -1) {
        array.splice(findIndex, 1);
      }
    },
    changeFile() {
      this.pass.isError = false;
    },
  },
};
</script>
<style scoped lang="scss">
.upload-page {
  position: relative;
}
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
.upload-document {
  list-style: none;
  padding: 4px;
  color: #515a6e;
  border-radius: 4px;
  -webkit-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
  overflow: hidden;
  position: relative;
}
.mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.preview-img-modal {
  ::v-deep .ivu-modal {
    width: 54% !important;
  }
  .preview-img {
    width: 100%;
  }
}
</style>
